<template>
  <b-container
    fluid
    style="background-color: rgba(245, 245, 245, 1); padding-bottom: 72px; padding-top: 72px;"
  >
    <b-row align-h="center" class="segment-title-row">
      <b-col lg="11">
        <!-- <span class="segment-title">新闻动态</span>
        <span class="segment-subtitle">News Center</span> -->
        <SectionTitle title="新闻动态" sub-title="News Center" />
      </b-col>
    </b-row>
    <b-row align-h="center" style="margin-top: 48px;">
      <b-col lg="11">
        <b-row>
          <b-col v-if="mainNews" sm="6">
            <!-- <NewsCenterItem
              title="借力社交电商 让农产品销售插上“翅膀”"
              content="魁牛与天津市达成战略合作后，合作社收购的优良马尔科土豆，将会大批量地供给给全国消费者，既解决了土豆的销量和农民增收问题，又为消费者提供了口感极佳"
              date-year="2018"
              date-day="10-19"
              img-src="/images/news-1.png"
              main
            /> -->
            <NewsCenterItem
              :id="mainNews.id"
              :title="mainNews.title"
              :content="mainNews.summary"
              :published-ts="mainNews.createtime"
              :img-src="mainNews.cover_image"
              main
            />
          </b-col>
          <b-col sm="6">
            <NewsCenterItem
              v-for="news in columnNews"
              :id="news.id"
              :key="news.id"
              :title="news.title"
              :content="news.summary"
              :published-ts="news.createtime"
              class="news-center-item"
            />
            <!-- <NewsCenterItem
              title="阿里巴巴入股星普魁牛13%股权"
              content="阿里巴巴将向星普魁牛转让阿里巴巴拥有的与星普魁牛相关的专有知识产权"
              date-year="2018"
              date-day="10-19"
              class="news-center-item"
            />
            <NewsCenterItem
              title="邦美佳集团公布2018年12月底季度业绩"
              content="基于集团在临近财年结束时的强劲表现和业务增长的可预见度"
              date-year="2018"
              date-day="10-19"
              class="news-center-item"
            />
            <NewsCenterItem
              title="阿里云推出马来西亚城市大脑助力提升城市治理能力"
              content="今日在吉隆坡一个仪式上宣布同马来西亚发展数字经济的官方机构"
              date-year="2018"
              date-day="10-19"
              class="news-center-item"
            /> -->
          </b-col>
        </b-row>
        <b-row align-h="center" style="padding-top: 48px;">
          <b-col class="d-flex justify-content-center">
            <b-button
              id="btn-more-news"
              squared
              variant="outline-secondary"
              size="sm"
              @click="onMoreBtnClicked"
            >
              MORE&nbsp;&lt;
            </b-button>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import SectionTitle from '@/components/m/SectionTitle';
import NewsCenterItem from '@/components/NewsCenterItem';

export default {
  components: {
    SectionTitle,
    NewsCenterItem,
  },
  props: {
    newsList: {
      type: Array,
      required: true,
    },
    imgDomain: {
      type: String,
      default: '',
    },
  },
  computed: {
    mainNews() {
      if (this.newsList.length > 0) {
        return this.newsList[0];
      } else {
        return null;
      }
    },
    columnNews() {
      return this.newsList.slice(1);
    },
  },
  methods: {
    onMoreBtnClicked() {
      this.$router.push('/news');
    },
  },
};
</script>

<style lang="scss" scoped>
#btn-more-news {
  width: 150px;
  height: 50px;
  font-size: 12px;
  font-weight: 400;
  font-family: 'ArialMT', 'Arial';
  line-height: 24px;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
}
.news-center-item {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 36px 0;
}
.news-center-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
</style>
